<!-- eslint-disable vue/no-template-shadow -->
<template>
  <div>
    <BasicTable @register="registerTable">
      <template #expandedRowRender="{ record }">
        <BasicTable
          @register="registerChildrenTable"
          :data-source="record.listwff"
          style="max-width: 65%"
        >
          <template #action="{ record }">
            <TableAction
              :actions="[
                {
                  label: t('common.preview'),
                  icon: 'icon-park-outline:preview-open',
                  onClick: handlePreview.bind(null, record),
                  // auth: 'super', // 根据权限控制是否显示: 有权限，会显示
                },
                {
                  label: t('common.download'),
                  icon: 'material-symbols:download-2-outline',
                  onClick: handleDownload.bind(null, record),
                  // auth: 'super', // 根据权限控制是否显示: 有权限，会显示
                },
              ]"
            />
          </template>
        </BasicTable>
      </template>
      <!-- 建立时间 -->
      <template #createtime="{ text: createtime }">
        <span>
          {{ proxy.$filters.filterTime(createtime) }}
        </span>
      </template>
      <!-- 计划结束时间 -->
      <template #planendtime="{ text: planendtime }">
        <span>
          {{ proxy.$filters.filterTime(planendtime) }}
        </span>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: t('common.view'),
              onClick: handleView.bind(null, record),
              // auth: 'super', // 根据权限控制是否显示: 有权限，会显示
            },
          ]"
        />
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts" setup>
  import { getCurrentInstance } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { getFlowDoneColumns, getChildFlowDoneColumns, getHistorySearch } from './flowData';
  import { getFlowToDoListApi } from '/@/api/demo/flow';
  import { useUserStore } from '/@/store/modules/user';
  import { useRouter } from 'vue-router';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();
  const useCommonStore = useUserStore();
  const { proxy }: any = getCurrentInstance();
  const router = useRouter();

  // 父级表格
  const [registerTable] = useTable({
    columns: getFlowDoneColumns(),
    useSearchForm: true,
    formConfig: getHistorySearch(), // 表单配置
    beforeFetch: (params) => {
      params.state = '1';
      params.userId = useCommonStore.userInfo?.userId;
    },
    api: getFlowToDoListApi,
    fetchSetting: {
      // 当前页传递给后台的字段名称
      pageField: 'CurrentPage',
      // 后台每页显示的数量字段名称
      sizeField: 'PageSizes',
      // 接口返回的表单数据字段名称
      listField: 'items',
      // 接口返回的表格总数字段名称
      totalField: 'totalCount',
    },
    showTableSetting: true, // 显示表格设置工具
    showIndexColumn: false,
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    bordered: true,
    actionColumn: {
      width: 300,
      fixed: 'right',
      title: t('common.action'),
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });
  // 子级表格
  const [registerChildrenTable] = useTable({
    // 分页配置
    columns: getChildFlowDoneColumns(),
    showIndexColumn: false,
    showTableSetting: false, // 表格设置工具配置
    bordered: true,
    pagination: false,
    scroll: { x: 0, y: 0 },
    canResize: false,
    actionColumn: {
      width: 400,
      fixed: 'right',
      title: t('common.action'),
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

  const handleView = (record: Recordable) => {
    router.push({ name: 'flowExample', params: { wfInsId: record.workflowid } });
  };

  // 子级操作点击事件
  const handlePreview = (record: Recordable) => {
    console.log('点击了预览', record);
  };
  const handleDownload = (record: Recordable) => {
    console.log('点击了下载', record);
  };
</script>
<style lang="less" scoped>
  ::v-deep(.ant-table-scroll) {
    overflow: auto !important;
  }

  ::v-deep(.clickRowStyle) {
    cursor: pointer !important;
    background-color: #32b4f0 !important;
  }
</style>
